window.addEventListener('load', function () {
    // 1.鼠标经过focus盒子显示左右小箭头,离开隐藏
    var focus = document.querySelector('.focus');
    var arrowl = document.querySelector('.arrow-l');
    var arrowr = document.querySelector('.arrow-r');
    // mouseover鼠标经过触发有冒泡
    focus.addEventListener('mouseover', function () {
        arrowl.style.display = 'block';
        arrowr.style.display = 'block';
        // 鼠标经过停止定时器onmouseover  鼠标经过触发
        window.clearTimeout(timer);
        timer = null;//清除定时器变量
    });
    // onmouseout     鼠标离开触发
    focus.addEventListener('mouseout', function () {
        arrowl.style.display = 'none';
        arrowr.style.display = 'none';
        // 鼠标离开开启定时器onmouseout     鼠标离开触发
        timer = setInterval(function () {
            // 手动调用右侧按钮的点击事件arrowr.click()
            arrowr.click();
        }, 3000);
    });
    // 2.动态生成小圆点
    // (1)获取元素
    // 获取轮播图的ul
    var focus_ul = document.querySelector('.focus_ul');
    // 获取轮播图图片的数量 
    var focus_ullisl = focus_ul.children.length;
    // 获取小圆点的ol
    var ol_xyd = document.querySelector('.focus').querySelector('.ol_xyd');
    // 获取 获取轮播图的左箭头
    var arrowl = document.querySelector('.arrow-l');
    // 获取 获取轮播图的右箭头
    var arrowr = document.querySelector('.arrow-r');
    // 获取轮播图的宽度
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // (2)动态生成小圆点  创建元素节点 document.createElement()
    // 添加节点 node.appendChild(child) 方法将一个节点添加到指定父节点的字节点列表末尾，类似于css里面的after 伪元素
    for (var i = 0; i < focus_ullisl; i++) {
        var li = document.createElement('li');
        ol_xyd.appendChild(li);//添加到指定父节点的字节点列表末尾
        // children获取所有的子元素节点
        // //(4)   给每个小圆点的li 设置索引号
        ol_xyd.children[i].setAttribute('index', i);
    }
    // (3)把第一个小圆点设置颜色
    ol_xyd.children[0].className = 'qs';
    // 3.给小圆点绑定点击事件,更改样式
    ol_xyd.addEventListener('click', function (e) {
        for (var i = 0; i < ol_xyd.children.length; i++) {
            // 清除小圆点的所有 类(干掉所有人)
            ol_xyd.children[i].className = '';
        }
        // e.target        返回触发事件的对象  标准
        //为当前点击的小圆点添加颜色类qs(留下我自己) 
        e.target.className = 'qs';
        // 得到当前的索引号 getAttribute获取自定义属性
        var index = e.target.getAttribute('index');
        // 解决俩个小bug
        //bug1 当我们点击了某个小圆点,就要把这个小圆点的索引号给num控制图片的滚动
        num = index;
        //bug2 当我们点击了某个小圆点,就要把这个小圆点的索引号给circle控制小圆点的播放
        circle = index;
        // console.log(index);
        // 4.点击小圆点切换图片 是ul在移动不是li
        // animate(obj, target, callback) focus_ul目标函数  e.target.getAttribute('index')目标位置
        animate(focus_ul, -focusWidth * index);
    });
    // 5.克隆第一张图片(li)放到focus_ul的最后面 加true 深克隆
    var first = focus_ul.children[0].cloneNode(true);
    // 添加到focus_ul的最后面
    focus_ul.appendChild(first);
    // 6.每点击一次右侧按钮,图片滚动一张
    /*  定义一个变量 每次点击自增1 * ul的宽度, 就是ul的滚动距离
     图片无缝滚动原理:
      (1)把ul第一个li复制一份，放到ul的最后面
      (2)当图片滚动到克隆的最后一张图片时，让ul快速的、不做动画的跳到最左侧:left为0,
      同时把num变量也改为0 让一切重头开始  */
    // num 控制图片的滚动
    var num = 0;
    // circle 控制小圆点的播放
    var circle = 0;
    // flag 节流阀
    var flag = true;
    // 轮播图的右箭头
    arrowr.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀
            // 当图片滚动到克隆的最后一张图片时，让ul快速的、不做动画的跳到最左侧:left为0
            // focus_ul.children.length - 1 获取focus_ul的子元素的所有个数
            if (num == focus_ul.children.length - 1) {
                focus_ul.style.left = 0;
                num = 0;
            }
            num++;
            // focusWidth 图片的宽度
            animate(focus_ul, - num * focusWidth, function () {
                // 这里是回调函数，动画执行完毕才会执行这里
                flag = true;//开启节流阀
            });
            // 因为focus_ul盒子里的li是左浮动, 轮播图盒子focus_ul的left值移动时X是向左滚动是负值
            // console.log(- num * focusWidth);
            // 7.点击左右按钮小圆点跟着变化
            // 最简单的做法是再声明一个变量circle，每次点击自增1,注意左侧的按钮也需要这个变量,
            // 因此要声明全局变量
            circle++;
            // 判断当circle变量等于ol_xyd.children.length小圆点的个数时把circle变量赋值为0，让一切重新开始
            // if (circle == ol_xyd.children.length) {
            //     circle = 0;
            // }// 获取小圆点的ol ol_xyd
            circle = circle == ol_xyd.children.length ? 0 : circle;
            // 调用函数
            circleChange();
        }
    });
    // 8.轮播图的左按钮
    arrowl.addEventListener('click', function () {
        if (flag) {
            flag = false;//关闭节流阀
            // 当图片滚动到第一张图片时，让ul快速的、不做动画的跳到最左侧:left为-num * focusWidth
            // 也就是在第一张图片时点击左按钮跳到最后一张图片
            // console.log(num);
            if (num == 0) {
                num = focus_ul.children.length - 1;
                focus_ul.style.left = -num * focusWidth + 'px';
            }
            num--;//要回头所以要--的
            // focusWidth 图片的宽度
            // 轮播图要滚动的距离 调用函数
            animate(focus_ul, - num * focusWidth, function () {
                flag = true;//开启节流阀
            });
            // 因为上面轮播图盒子focus_ul的left值移动后left的值变成了负值,这里轮播图盒子focus_ul
            // 要想右移动要正值,负负得正
            // 7.点击左右按钮小圆点跟着变化
            // 最简单的做法是再声明一个变量circle，每次点击自增1,注意左侧的按钮也需要这个变量,
            // 因此要声明全局变量
            circle--;
            // 左按钮一开始 circle为0,当我们再点击一次左按钮circle就会--变为负数,这时我们要把小圆点改到
            // 最后一个去 ol_xyd.children.length获取小圆点的数量
            // if (circle < 0) {
            //     circle = ol_xyd.children.length - 1;
            //第6个 ol_xyd.children.length=6,children从0开始数
            // }
            circle = circle < 0 ? ol_xyd.children.length - 1 : circle;
            // 调用函数
            circleChange();
        }
    });
    // 因为这几行代码左右按钮的都相同,可以封装起来,简化代码
    function circleChange() {
        // 先清除其余小圆点的qs类名
        for (var i = 0; i < ol_xyd.children.length; i++) {
            // 清除小圆点的所有 类(干掉所有人)
            ol_xyd.children[i].className = '';
        }
        // e.target        返回触发事件的对象  标准
        //为当前点击的小圆点添加颜色类qs(留下我自己) 
        ol_xyd.children[circle].className = 'qs';
    }
    // 9.自动播放轮播图定时器
    var timer = setInterval(function () {
        // 自动播放轮播图,实际类似于右侧按钮
        // 此时我们使用手动调用右侧按钮的点击事件arrowr.click();
        arrowr.click();
        // 停止定时器  开启定时器 在最前面
    }, 5000);

    // 顶部右边侧边栏模块制作 滚动到一定的距离 sliderbar盒子改为固定定位
    // 1.获取元素
    // 获取顶部右边侧边栏
    var sliderbar = document.querySelector('.slider-bar');
    // 获取游戏盒子
    var search = document.querySelector('#sliderbarTOP');
    // 顶部右边侧边栏 距离顶部的距离
    var sliderbarTOP = sliderbar.offsetTop;
    //search 距离顶部的距离
    var searchTop = search.offsetTop;
    // 固定定位之后的值
    var Fixed = sliderbarTOP - searchTop;
    // 获取返回顶部的按钮
    var goBack = document.querySelector('.goBack');
    // 获取要判断要返回顶部的距离
    var like = document.querySelector('.like');
    var liketop = like.offsetTop;
    // console.log(sliderbarTOP);
    // 2.scroll 滚动事件 当滚动条发生变化会触发的事件
    document.addEventListener('scroll', function () {
        // 页面被卷去的头部是window.pageYOffset获取
        var top = window.pageYOffset;
        if (top >= searchTop) {
            sliderbar.style.position = 'fixed';
            sliderbar.style.top = Fixed + 'px';
            // sliderbar.style.top = 60 + 'px'; 不能写死不然效果不好
        } else {
            sliderbar.style.position = 'absolute';
            sliderbar.style.top = sliderbarTOP + 'px';
        }
        // 返回顶部

        if (top >= liketop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    // 点击按钮返回顶部
    goBack.addEventListener('click', function () {
        // 调用浏览器滚动的缓动动画
        windowanimate(goBack, 0);
        // console.log(11);
    });
});
